<template>
	<view  class="userPage">
		<view class="user-box">
			<image src="../../../static/logo.png" mode="">
			</image>
			<view class="user" @click="goUserPage">
				<image class="avatar" :src="userInfo.avatar_file.url"></image>
				<!-- <image class="avatar" src="https://game.gtimg.cn/images/yxzj/zlkdatasys/images/image/20221102/16673885239917.jpg" mode=""></image> -->
				<view class="nickName">{{userInfo.nickname}}</view>
			</view>
		</view>
		<view class="card">
			<van-grid :border="false" :column-num="5">
				<van-grid-item icon="pending-payment" text="待付款" />
				<van-grid-item icon="tosend" text="待发货" />
				<van-grid-item icon="logistics" text="待收货" />
				<van-grid-item icon="paid" text="待确定" />
				<van-grid-item icon="credit-pay" text="退款/售后" />
			</van-grid>
		</view>
		<view class="card">
			<van-cell icon="location-o" title="地址管理" @click="goUserModel" is-link></van-cell>
			<van-cell icon="coupon-o" title="优惠券" is-link></van-cell>
			<van-cell icon="paid" title="我的钱包" is-link></van-cell>
			<van-cell icon="service-o" title="联系客服" is-link></van-cell>
			<van-cell icon="setting-o" title="设置" is-link></van-cell>
		</view>

		<van-cell title="微信登录" @click="user(0)"></van-cell>
		<van-cell title="登录" @click="user(1)"></van-cell>
		<van-cell title="注册" @click="user(2)"></van-cell>
		<tab-bar :index="3"></tab-bar>
		<van-tabbar v-model="active" @change="onChange">
			<van-tabbar-item icon="home-o" >首页</van-tabbar-item>
			<van-tabbar-item icon="apps-o">分类</van-tabbar-item>
			<van-tabbar-item icon="shopping-cart">购物车</van-tabbar-item>
			<van-tabbar-item icon="friends">个人中心</van-tabbar-item>
		</van-tabbar>
	</view>
</template>

<script>
	import Storage from "@/untils/storage.js";
	import {
		ref
	} from "vue";
	export default {
		setup() {
			const active = ref(3);
			const onChange = (index) => {
				let router = ['index', 'cate', 'cart', 'user/login'];
				uni.reLaunch({
					url: `/pages/${router[index]}/index`,
				});
			};
			return {
				active,
				onChange,
			};
		},
		data() {
			return {
				userInfo: {},
			};
		},
		onLoad() {
			this.userInfo = Storage.userinfo;
		},
		methods: {
			goUserModel() {
				uni.navigateTo({
					url: '/pages/user/address/list',
				});
			},
			goUserPage(e) {
				if (!Storage.TokenOut) {
					uni.navigateTo({
						url: "/uni_modules/uni-id-pages/pages/login/login-withpwd",
					});
				} else {
					uni.navigateTo({
						url: "/uni_modules/uni-id-pages/userinfo/userinfo",
					});
				}
			},
			user(idx) {
				let router = [
					"/uni_modules/uni-id-pages/pages/login/login-withoutpwd",
					"/uni_modules/uni-id-pages/pages/login/login-withpwd",
					"/uni_modules/uni-id-pages/pages/register/register",
				];
				uni.navigateTo({
					url: router[idx],
				});
			},
		},
	};
</script>

<style>
	.uni-app--showtopwindow [data-page="pages/component/view/view"] uni-page-head {
		display: none;
	}

	.userPage {
		background-color: #f2f2f2;
	}

	.user-box {
		width: 100%;
		height: 562upx;
		position: relative;
	}

	.user-box image {
		width: 100%;
		height: 100%;
	}

	.user-box .user {
		position: absolute;
		width: 700upx;
		height: 200upx;
		left: 25upx;
		top: 180upx;
		background-color: aliceblue;
		z-index: 1;
		display: flex;
	}

	.user-box .user .avatar {
		height: 100upx;
		width: 100upx;
		margin: 0 30upx;
		border-radius: 100%;
	}

	.user-box .user .nickName {
		font-size: 50upx;
	}
</style>
